﻿<%@ Page Title="Mobilhjulskift.dk - Booking af tid" Language="C#" MasterPageFile="~/WebsiteSub.master" AutoEventWireup="true" CodeBehind="Booking.aspx.cs" Inherits="TireService.Website.Kunde.Booking" %>

<%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxCallback" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxCallbackPanel" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxPopupControl" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxRoundPanel" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<%@ Register assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxPanel" tagprefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGridView.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxLoadingPanel" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.12.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxHiddenField" TagPrefix="dx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="content" runat="server">

    <dx:ASPxLoadingPanel ID="LoadingPanel" Text="Vent venligst..." ClientInstanceName="LoadingPanel" runat="server" Modal="True">
    </dx:ASPxLoadingPanel>

    <!-- Javascript: Select Car Panel  -->
    <script language="javascript" type="text/javascript">

        // Function for selecting car and handling GUI based on server postback
        function SelectCar(element, key) {
            // Send carid to server and load select address panel
            callbackSelectAddressPanel.PerformCallback(key);

            // Show loadingpanel while doing server postback
            LoadingPanel.Show();
        }

        function OnSelectCarPanelComplete(s, e) {
            // Hide loadingpanel after postback
            LoadingPanel.Hide();

            // Nothing currently - not used
        }

//        // Function that runs after gridview has been bound / callback
//        function OnCarListFetched(s, e) {
//            // Check if only one car exists in list - auto select
//            if (gvSelectCar.pageRowCount > 0) {

//                if (gvSelectCar.pageRowCount == 1) {
//                    // Only one search result - auto select car

//                    // Get first row values and trigger event RedirectToCustomerPage
//                    gvSelectCar.GetRowValues(0, 'CustomerId', RedirectToCustomerPage);
//                } 
//            }
//            else {
//                
//                //alert('Søgning gav intet resultat');
//            }
//        }

        function CallBackError(s, e) {
            // Hide loadingpanel in case it is running
            LoadingPanel.Hide();

            alert('Fejl opstod: ' + e.message);
        }

    </script>
    <div id="box1">
        <h1>Booking af hjulskift</h1>

    <!-- Select Car Panel -->
    <dx:ASPxCallbackPanel ID="callbackSelectCarPanel" ClientInstanceName="callbackSelectCarPanel" runat="server" OnCallback="callbackSelectCarPanel_Callback" RenderMode="Table">
        <ClientSideEvents EndCallback="OnSelectCarPanelComplete" CallbackError="CallBackError" />
        <PanelCollection>
            <dx:PanelContent>
                <b>Vælg bil</b>
                
                <dx:ASPxGridView ID="gvSelectCar" runat="server" ClientInstanceName="gvSelectCar"
                    KeyFieldName="CarId" AutoGenerateColumns="False" EnableCallBacks="True"
                    OnCustomCallback="gvSelectCar_CustomCallback">
                    <SettingsLoadingPanel Text="Henter&amp;hellip;" />
                    <SettingsText EmptyDataRow="Ingen biler der skal have skiftet hjul" />
                    <SettingsPager AlwaysShowPager="False" PageSize="10" Position="Bottom">
                        <Summary AllPagesText="Sider: {0} - {1} ({2} biler)" Text="Side {0} af {1} ({2} biler)" />
                    </SettingsPager>
                    <SettingsBehavior AllowSort="false" ConfirmDelete="false" AllowGroup="false" AllowDragDrop="false" />
                    <Columns>
                        <dx:GridViewDataColumn Caption="Vælg bil" Width="106px" VisibleIndex="1">
                            <DataItemTemplate>
                                <a href="javascript:void(0);" onclick="SelectCar(this, '<%# Container.KeyValue %>')">Vælg bil</a>
                            </DataItemTemplate>
                        </dx:GridViewDataColumn>
                        <dx:GridViewDataColumn FieldName="RegistrationNumber" VisibleIndex="0" Caption="Regnr">
                        </dx:GridViewDataColumn>
                        <dx:GridViewDataTextColumn FieldName="CarBrandDescription" VisibleIndex="1" Caption="Mærke">
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataColumn FieldName="Model" VisibleIndex="2" Caption="Model">
                        </dx:GridViewDataColumn>
                        <dx:GridViewDataColumn FieldName="Year" VisibleIndex="3" Caption="Årgang">
                        </dx:GridViewDataColumn>
                    </Columns>
                </dx:ASPxGridView>

            </dx:PanelContent>
        </PanelCollection>
    </dx:ASPxCallbackPanel>

    <table width="100%">
        <tr>
            <td valign="top">

                <!-- Javascript: Select Address Panel -->
                <script language="javascript" type="text/javascript">


                    function OnSelectAddressPanelComplete(s, e) {
                        // Hide loadingpanel after postback
                        LoadingPanel.Hide();

                        // Show/hide GUI panels
                        GoToSelectAddressPanel();
                    }

                    function GoToSelectAddressPanel() {
                        // Hide select car panel
                        callbackSelectCarPanel.SetVisible(false);

                        // Show select address panel
                        callbackSelectAddressPanel.SetVisible(true);
                    }

                    // Function for handling GUI when selecting an address in address dropdown
                    function OnSelectAddressChanged(s, e) {
                        var SelectedAddress = ddlSelectAddress.GetValue();
                        var Address = ddlSelectAddress.GetText();
                        Address = Address.split("|");

                        if (SelectedAddress == 0) {
                            // Primary address has been selected
                            // Hide and Disable fields
                            pManualAddress.SetVisible(false);
                            txtAddress.SetEnabled(false);
                            txtZipCode.SetEnabled(false);
                            //ddlZipCode.SetEnabled(false);

                            // Load address text
                            txtAddress.SetText(Address[0]);
                            txtZipCode.SetText(Address[1]);
                            //ddlZipCode.SetValue(Address[1]);

                            // Show available dates for selected address
                            ShowDates();
                        }
                        if (SelectedAddress == 1) {
                            // Secondary address has been selected
                            // Hide and Disable fields
                            pManualAddress.SetVisible(false);
                            txtAddress.SetEnabled(false);
                            txtZipCode.SetEnabled(false);
                            //ddlZipCode.SetEnabled(false);

                            // Load address text
                            txtAddress.SetText(Address[0]);
                            txtZipCode.SetText(Address[1]);
                            //ddlZipCode.SetValue(Address[1]);

                            // Show available dates for selected address
                            ShowDates();
                        }
                        if (SelectedAddress == 2) {
                            // Custom address has been selected
                            // Show and enable fields
                            pManualAddress.SetVisible(true);
                            txtAddress.SetEnabled(true);
                            txtZipCode.SetEnabled(true);
                            //ddlZipCode.SetEnabled(true);

                            // Clear text values
                            txtAddress.SetText("");
                            //ddlZipCode.SetValue("");
                            txtAddress.SetFocus();
                            txtZipCode.SetText("");
                        }
                    }

                    // Function that will show free dates based on entered address
                    function ShowDates() {
                        // Validate values
                        ddlSelectAddress.Validate();
                        txtAddress.Validate();
                        txtZipCode.Validate();
                        //ddlZipCode.Validate();

                        var isFormValid = ASPxClientEdit.ValidateGroup("SelectAddress");
                        if (isFormValid) {
                            // Form is valid - show free dates

                            // Hide timeslot panel (in case new address is being selected)
                            callbackSelectTimeslotPanel.SetVisible(false);

                            // Prepare input (0: Selected address, 1: ZipCode)
                            var input = ddlSelectAddress.GetValue() + '|' + txtZipCode.GetText(); //  ddlZipCode.GetValue();

                            // Do server postback
                            callbackSelectDatePanel.PerformCallback(input);

                            // Show loadingpanel while doing server postback
                            LoadingPanel.Show();
                        }
                    }

                </script>

                

                <!-- Select Address/Location Panel -->
                <dx:ASPxCallbackPanel ID="callbackSelectAddressPanel" ClientInstanceName="callbackSelectAddressPanel" runat="server" OnCallback="callbackSelectAddressPanel_Callback" RenderMode="Table" ClientVisible="false">
                    <ClientSideEvents EndCallback="OnSelectAddressPanelComplete" CallbackError="CallBackError" />
                    <PanelCollection>
                        <dx:PanelContent>
                            <b>Valgt bil</b>
                            <table>
                                <tr>
                                    <td>
                                        <dx:ASPxLabel ID="lblSelectedCarRegistrationNumber" runat="server" Text="Regnr">
                                        </dx:ASPxLabel>
                                    </td>
                                    <td>
                                        <dx:ASPxLabel ID="lblSelectedCarRegistrationNumberValue" ClientInstanceName="lblSelectedCarRegistrationNumberValue" runat="server" Text="">
                                        </dx:ASPxLabel>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <dx:ASPxLabel ID="lblSelectedCarBrandDescription" runat="server" Text="Bilmærke og model">
                                        </dx:ASPxLabel>
                                    </td>
                                    <td>
                                        <dx:ASPxLabel ID="lblSelectedCarBrandDescriptionValue" ClientInstanceName="lblSelectedCarBrandDescriptionValue" runat="server" Text="">
                                        </dx:ASPxLabel>
                                    </td>
                                </tr>
                            </table>
                            <!-- Panel with info on existing booking, if exists -->
                            <dx:ASPxPanel runat="server" ID="pExistingBooking" ClientInstanceName="pExistingBooking">
                                <PanelCollection>
                                    <dx:PanelContent>
                                        <hr />
                                        <b>Eksisterende booking</b>
                                        <table>
                                            <tr>
                                                <td>
                                                    <dx:ASPxLabel ID="lblExistingBookingDate" runat="server" Text="Dato">
                                                    </dx:ASPxLabel>
                                                </td>
                                                <td>
                                                    <dx:ASPxLabel ID="lblExistingBookingDateValue" ClientInstanceName="lblExistingBookingDateValue" runat="server" Text="">
                                                    </dx:ASPxLabel>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <dx:ASPxLabel ID="lblExistingBookingTimeslot" runat="server" Text="Tidsrum">
                                                    </dx:ASPxLabel>
                                                </td>
                                                <td>
                                                    <dx:ASPxLabel ID="lblExistingBookingTimeslotValue" ClientInstanceName="lblExistingBookingTimeslotValue" runat="server" Text="">
                                                    </dx:ASPxLabel>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <dx:ASPxLabel ID="lblExistingBookingAddress" runat="server" Text="Adresse">
                                                    </dx:ASPxLabel>
                                                </td>
                                                <td>
                                                    <dx:ASPxLabel ID="lblExistingBookingAddressValue" ClientInstanceName="lblExistingBookingAddressValue" runat="server" Text="">
                                                    </dx:ASPxLabel>
                                                </td>
                                            </tr>
                                        </table>
                                    </dx:PanelContent>
                                </PanelCollection>
                            </dx:ASPxPanel>

                            <hr />
                            <b>Vælg adresse</b>
                
                            <table>
                                <tr>
                                    <td>
                                        <dx:ASPxLabel ID="lblSelectAddress" runat="server" Text="Vælg adresse">
                                        </dx:ASPxLabel>
                                    </td>
                                    <td>
                                        <dx:ASPxComboBox ID="ddlSelectAddress" ClientInstanceName="ddlSelectAddress" IncrementalFilteringMode="StartsWith" DropDownStyle="DropDownList" runat="server">
                                            <ClientSideEvents SelectedIndexChanged="function(s, e) { OnSelectAddressChanged(s); }" />
                                            <ValidationSettings CausesValidation="true" ValidationGroup="SelectAddress" RequiredField-IsRequired="true" RequiredField-ErrorText="Vælg adresse" SetFocusOnError="true" ErrorDisplayMode="ImageWithTooltip">
                                                <RequiredField IsRequired="True" ErrorText="V&#230;lg adresse"></RequiredField>
                                            </ValidationSettings>
                                        </dx:ASPxComboBox>
                                    </td>
                                </tr>
                            </table>
                            <dx:ASPxPanel runat="server" ID="pManualAddress" ClientInstanceName="pManualAddress" ClientVisible="false">
                                <PanelCollection>
                                    <dx:PanelContent>
                                        <table>
                                            <tr>
                                                <td>
                                                    <dx:ASPxLabel ID="lblAddress" ClientInstanceName="lblAddress" runat="server" Text="Vej">
                                                    </dx:ASPxLabel>
                                                </td>
                                                <td colspan="2">
                                                    <dx:ASPxTextBox ID="txtAddress" ClientInstanceName="txtAddress" runat="server" Width="200px" ClientEnabled="false" NullText="Adresse">
                                                        <ValidationSettings CausesValidation="true" ValidationGroup="SelectAddress" RequiredField-IsRequired="true" RequiredField-ErrorText="Indtast adresse" SetFocusOnError="true" ErrorDisplayMode="ImageWithTooltip">
                                                            <RequiredField IsRequired="True" ErrorText="Indtast adresse"></RequiredField>
                                                        </ValidationSettings>
                                                    </dx:ASPxTextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <dx:ASPxLabel ID="lblZipCodeCity" ClientInstanceName="lblZipCodeCity" runat="server" Text="Postnr">
                                                    </dx:ASPxLabel>
                                                </td>
                                                <td>
                                                    <dx:ASPxTextBox ID="txtZipCode" NullText="Postnr" ClientInstanceName="txtZipCode" runat="server" Width="200px" ClientEnabled="false">
                                                        <ValidationSettings CausesValidation="true" ValidationGroup="SelectAddress" RequiredField-IsRequired="true" RequiredField-ErrorText="Indtast postnr" SetFocusOnError="true" ErrorDisplayMode="ImageWithTooltip">
                                                            <RequiredField IsRequired="True" ErrorText="Indtast postnr"></RequiredField>
                                                        </ValidationSettings>
                                                        <ClientSideEvents TextChanged="function(s, e) { ShowDates(); }" KeyDown="function(s, e) {if(ASPxClientUtils.GetKeyCode(e.htmlEvent) ===  ASPxKey.Enter) ShowDates();}" />
                                                    </dx:ASPxTextBox>

                                                    <%--<dx:ASPxComboBox ID="ddlZipCode" ClientInstanceName="ddlZipCode" IncrementalFilteringMode="Contains" ClientEnabled="false" 
                                                        DropDownWidth="200" DropDownStyle="DropDownList" runat="server" ValueField="ZipCode" TextFormatString="{0} {1}">
                                                        <ClientSideEvents SelectedIndexChanged="function(s, e) { ShowDates(); }" />
                                                        <ValidationSettings CausesValidation="true" ValidationGroup="SelectAddress" RequiredField-IsRequired="true" RequiredField-ErrorText="Vælg postnr og by" SetFocusOnError="true" ErrorDisplayMode="ImageWithTooltip">
                                                            <RequiredField IsRequired="True" ErrorText="V&#230;lg postnr og by"></RequiredField>
                                                        </ValidationSettings>
                                                        <Columns>
                                                            <dx:ListBoxColumn FieldName="ZipCode" Caption="Postnr" Width="50px" />
                                                            <dx:ListBoxColumn FieldName="City" Caption="By" Width="150px" />
                                                        </Columns>
                                                    </dx:ASPxComboBox>--%>

                                                </td>
                                                <td>
                                                    <dx:ASPxLabel ID="lblSelectedCity" ClientInstanceName="lblSelectedCity" runat="server" Text="">
                                                    </dx:ASPxLabel>
                                                </td>
                                            </tr>
                                        </table>
                                    </dx:PanelContent>
                                </PanelCollection>
                            </dx:ASPxPanel>
                
                        </dx:PanelContent>
                    </PanelCollection>
                </dx:ASPxCallbackPanel>
            </td>
            <td valign="top">

                <!-- Javascript: Select date Panel  -->
                <script language="javascript" type="text/javascript">

                    function OnSelectDatePanelComplete(s, e) {
                        // Hide loadingpanel after postback
                        LoadingPanel.Hide();

                        // Show panel
                        callbackSelectDatePanel.SetVisible(true);

                        if (ddlSelectDate.GetItemCount() == 0) {
                            ddlSelectDate.SetVisible(false);
                            lblDateSearchMessage.SetVisible(true);
                            lblDateSearchMessage.SetText("<br>Ingen ledige dato'er blev fundet for valgt postnr. Prøv et andet område eller kontakt vores kundesupport via nedenstående formular");
                            callbackNoDateFit.SetVisible(true);
                        } else {
                            ddlSelectDate.SetVisible(true);
                            lblDateSearchMessage.SetVisible(false);
                            callbackNoDateFit.SetVisible(false);
                        }
                    }

                    // Function that will show free timeslots on selected date
                    function ShowTimeSlots(s, e) {

                        var freetimeintervalincluded = hfFreeTimeIntervalIncluded.Get("FreeTimeIntervalIncluded"); 

                        // Callback server to get available timeslots
                        callbackSelectTimeslotPanel.PerformCallback(freetimeintervalincluded);

                        // Show loadingpanel while doing server postback
                        LoadingPanel.Show();
                    }

                    function RejectTimeslot(s, e) {
                        LoadingPanel.Show();

                        callbackNoDateFit.PerformCallback(txtComment.GetText());

                    }
                    
                    function OnNoDateFitComplete(s, e) {
                        // Hide loadingpanel after postback
                        LoadingPanel.Hide();

                        alert('Tak for din besked, du vil blive kontaktet af vores support - du stilles nu videre til forsiden.');

                        window.open('../Index.aspx', '_self');
                    }

                </script>


                <!-- Select date Panel -->
                <dx:ASPxCallbackPanel ID="callbackSelectDatePanel" ClientInstanceName="callbackSelectDatePanel" runat="server" OnCallback="callbackSelectDatePanel_Callback" RenderMode="Table" ClientVisible="false">
                    <ClientSideEvents EndCallback="OnSelectDatePanelComplete" CallbackError="CallBackError" />
                    <PanelCollection>
                        <dx:PanelContent>
                            <b>Vælg dato</b>
                            <dx:ASPxLabel ID="lblDateSearchMessage" ClientInstanceName="lblDateSearchMessage" runat="server" Text="" ClientVisible="false">
                            </dx:ASPxLabel>
                            <dx:ASPxComboBox ID="ddlSelectDate" ClientInstanceName="ddlSelectDate" IncrementalFilteringMode="StartsWith" DropDownStyle="DropDownList" runat="server">
                                <ClientSideEvents SelectedIndexChanged="function(s, e) { ShowTimeSlots(); }" />
                                <ValidationSettings CausesValidation="true" ValidationGroup="SelectDate" RequiredField-IsRequired="true" RequiredField-ErrorText="Vælg dato" SetFocusOnError="true" ErrorDisplayMode="ImageWithTooltip">
                                    <RequiredField IsRequired="True" ErrorText="V&#230;lg dato"></RequiredField>
                                </ValidationSettings>
                            </dx:ASPxComboBox>

                            <!-- None of the dates fit the user - show alternative booking method -->
                            <dx:ASPxCallbackPanel ID="callbackNoDateFit" ClientInstanceName="callbackNoDateFit" runat="server" OnCallback="callbackNoDateFit_Callback" RenderMode="Table" ClientVisible="false">
                                <ClientSideEvents EndCallback="OnNoDateFitComplete" CallbackError="CallBackError" />
                                <PanelCollection>
                                    <dx:PanelContent>
                                        <br />
                                        Kommentar - forslag til nye dato'er og/eller anden adresse:<br />
                                        <dx:ASPxMemo ID="txtComment" ClientInstanceName="txtComment" runat="server" Height="80px" Width="200px" 
                                            NullText="Note/Kommentar">
                                        </dx:ASPxMemo>
                                        <br />
                                        <dx:ASPxButton ID="btnSend" ClientInstanceName="btnSend" runat="server" Text="Send" AutoPostBack="False" UseSubmitBehavior="False">
                                            <ClientSideEvents Click="function(s, e) { RejectTimeslot(); }" />
                                        </dx:ASPxButton>
                                    </dx:PanelContent>
                                </PanelCollection>
                            </dx:ASPxCallbackPanel>
                        </dx:PanelContent>
                    </PanelCollection>
                </dx:ASPxCallbackPanel>
            
            <%--</td>
            <td valign="top">--%>

                <!-- Javascript: Select timeslot Panel  -->
                <script language="javascript" type="text/javascript">

        
                    function OnSelectTimeslotPanelComplete(s, e) {
                        // Hide loadingpanel after postback
                        LoadingPanel.Hide();

                        var freetimeintervalincluded = hfFreeTimeIntervalIncluded.Get("FreeTimeIntervalIncluded");
                        var buytimeinterval = hfFreeTimeIntervalIncluded.Get("BuyTimeInterval");

                        btnBuyShortTimeslotInterval.SetVisible(!freetimeintervalincluded);
                        btnCancelBuyTimeslotInterval.SetVisible(buytimeinterval);

                        // Show panel
                        callbackSelectTimeslotPanel.SetVisible(true);
                    }

                    function BuyShortTimeslotInterval(s, e) {
                        hfFreeTimeIntervalIncluded.Set("FreeTimeIntervalIncluded", true);
                        hfFreeTimeIntervalIncluded.Set("BuyTimeInterval", true);

                        // Callback server to get available timeslots
                        callbackSelectTimeslotPanel.PerformCallback(true);

                        // Show loadingpanel while doing server postback
                        LoadingPanel.Show();
                    }

                    function CancelBuyTimeslotInterval(s, e) {
                        hfFreeTimeIntervalIncluded.Set("FreeTimeIntervalIncluded", false);
                        hfFreeTimeIntervalIncluded.Set("BuyTimeInterval", false);

                        // Callback server to get available timeslots
                        callbackSelectTimeslotPanel.PerformCallback(false);

                        // Show loadingpanel while doing server postback
                        LoadingPanel.Show();
                    }

                    function SelectTimeSlot(s, e) {
                        // Validate values
                        rblSelectTimeslot.Validate();

                        var isFormValid = ASPxClientEdit.ValidateGroup("SelectTimeslot");
                        if (isFormValid) {

                            var input = rblSelectTimeslot.GetValue();

                            // Callback server to show approval of booking
                            callbackApproveBookingPanel.PerformCallback(input);

                            // Show loadingpanel while doing server postback
                            LoadingPanel.Show();
                        }
                    }

                </script>

                <!-- Hidden field used for determining if subscription contains free time interval included for booking -->
                <dx:ASPxHiddenField ID="hfFreeTimeIntervalIncluded" ClientInstanceName="hfFreeTimeIntervalIncluded" runat="server">
                </dx:ASPxHiddenField>

                <!-- Select timeslot Panel -->
                <dx:ASPxCallbackPanel ID="callbackSelectTimeslotPanel" ClientInstanceName="callbackSelectTimeslotPanel" runat="server" OnCallback="callbackSelectTimeslotPanel_Callback" RenderMode="Table" ClientVisible="false">
                    <ClientSideEvents EndCallback="OnSelectTimeslotPanelComplete" CallbackError="CallBackError" />
                    <PanelCollection>
                        <dx:PanelContent>
                
                            <b>Vælg tidsrum</b>
                            <dx:ASPxButton ID="btnBuyShortTimeslotInterval" ClientInstanceName="btnBuyShortTimeslotInterval" runat="server" Text="Køb 2 timers interval (Pris 50kr)" AutoPostBack="False" UseSubmitBehavior="False">
                                <ClientSideEvents Click="function(s, e) { BuyShortTimeslotInterval(); }" />
                            </dx:ASPxButton>
                            <dx:ASPxButton ID="btnCancelBuyTimeslotInterval" ClientInstanceName="btnCancelBuyTimeslotInterval" runat="server" Text="Annuller køb af 2 timers interval" AutoPostBack="False" UseSubmitBehavior="False">
                                <ClientSideEvents Click="function(s, e) { CancelBuyTimeslotInterval(); }" />
                            </dx:ASPxButton>
                            <br />
                            <dx:ASPxRadioButtonList ID="rblSelectTimeslot" ClientInstanceName="rblSelectTimeslot" runat="server" Font-Size="Larger" AutoPostBack="false">
                                <ValidationSettings ValidationGroup="SelectTimeslot" RequiredField-IsRequired="true" ErrorDisplayMode="ImageWithTooltip" RequiredField-ErrorText="Vælg tidsrum">
                                </ValidationSettings>
                                <%--<ClientSideEvents SelectedIndexChanged="function(s, e) { ShowPaymentMethod(s) }" />--%>
                            </dx:ASPxRadioButtonList>
                            <br />
                            <dx:ASPxButton ID="btnSelectTimeSlot" ClientInstanceName="btnSelectTimeSlot" runat="server" Text="Book tid" AutoPostBack="False" UseSubmitBehavior="False">
                                <ClientSideEvents Click="function(s, e) { SelectTimeSlot(); }" />
                            </dx:ASPxButton>

                        </dx:PanelContent>
                    </PanelCollection>
                </dx:ASPxCallbackPanel>
            </td>
        </tr>
    </table>
    <hr />
    <!-- Javascript: approve booking Panel  -->
    <script language="javascript" type="text/javascript">

        function OnApproveBookingComplete(s, e) {
            // Hide loadingpanel after postback
            LoadingPanel.Hide();

            // Show panel
            callbackApproveBookingPanel.SetVisible(true);

            // Hide other panels
            callbackSelectTimeslotPanel.SetVisible(false);
            callbackSelectDatePanel.SetVisible(false);
            callbackSelectAddressPanel.SetVisible(false);
        }

        function CorrectBooking(s, e) {

            // Hide panel
            callbackApproveBookingPanel.SetVisible(false);

            // Show other panels
            callbackSelectTimeslotPanel.SetVisible(true);
            callbackSelectDatePanel.SetVisible(true);
            callbackSelectAddressPanel.SetVisible(true);
        }

        function ConfirmBooking(s, e) {

            // Prepare input for booking for server callback
            var input = '';

            // Callback server to show approval of booking
            callbackConfirmBookingPanel.PerformCallback(input);

            // Show loadingpanel while doing server postback
            LoadingPanel.Show();
        }

//        function SaveOutlookAppointment() {
//            // Do callback and save outlook appointment
//            callbackSaveOutlookAppointment.PerformCallback(lblOutlookAppointmentDetails.GetText());
//        }

//        function OnCallbackSaveOutlookAppointmentCompleted(s, e) { 
//            // Nothing
//        }

    </script>

    <%--<dx:ASPxCallback ID="callbackSaveOutlookAppointment" ClientInstanceName="callbackSaveOutlookAppointment" runat="server" OnCallback="callbackSaveOutlookAppointment_Callback">
        <ClientSideEvents CallbackError="CallBackError" CallbackComplete="OnCallbackSaveOutlookAppointmentCompleted" />
    </dx:ASPxCallback>--%>

    <!-- Customer approve booking Panel -->
    <dx:ASPxCallbackPanel ID="callbackApproveBookingPanel" ClientInstanceName="callbackApproveBookingPanel" runat="server" OnCallback="callbackApproveBookingPanel_Callback" RenderMode="Table" ClientVisible="false">
        <ClientSideEvents EndCallback="OnApproveBookingComplete" CallbackError="CallBackError" />
        <PanelCollection>
            <dx:PanelContent>
                <b>Booking gennemført</b><br />
                Din bil er nu booket ind til hjulskift. Der er blevet sendt en email med bekræftelse.<br />
                <br />
                <%--<dx:ASPxButton ID="btnAddOutlookAppointment" ClientInstanceName="btnAddOutlookAppointment" runat="server" Text="Gem aftale i Outlook" AutoPostBack="false" UseSubmitBehavior="false">
                    <ClientSideEvents Click="function(s, e) { SaveOutlookAppointment(); }" />
                </dx:ASPxButton>--%>
                Klik her for at gemme aftale i Outlook: <asp:HyperLink ID="lnkAddOutlookAppointment" Target="_blank" runat="server"></asp:HyperLink>
                <br />
                <br />
                Klik her for at ændre din booking eller lav booking for en anden bil: <asp:HyperLink ID="lnkBooking" runat="server"></asp:HyperLink><br />
                <br />
                De venligste hilsner<br />
                Mobilhjulskift.dk
                <%--<dx:ASPxLabel ID="lblOutlookAppointmentDetails" ClientInstanceName="lblOutlookAppointmentDetails" runat="server" Text="" ClientVisible="false">
                </dx:ASPxLabel>--%>

                <%--<b>Booking gemt</b><br />
                Din booking er hermed gemt.

                Faktura data (hvis der er en pris)<br />
                <hr />
                <table width="100%">
                    <tr>
                        <td>
                            <dx:ASPxButton ID="btnCorrectBooking" ClientInstanceName="btnCorrectBooking" runat="server" Text="Ret booking" AutoPostBack="False" UseSubmitBehavior="False">
                                <ClientSideEvents Click="function(s, e) { CorrectBooking(); }" />
                            </dx:ASPxButton>
                        </td>
                        <td align="right">
                            <dx:ASPxButton ID="btnConfirmBooking" ClientInstanceName="btnConfirmBooking" runat="server" Text="Bekræft booking" AutoPostBack="False" UseSubmitBehavior="False">
                                <ClientSideEvents Click="function(s, e) { ConfirmBooking(); }" />
                            </dx:ASPxButton>
                        </td>
                    </tr>
                </table>
                <hr />--%>
            </dx:PanelContent>
        </PanelCollection>
    </dx:ASPxCallbackPanel>

    <!-- Javascript: confirmation Panel  -->
    <script language="javascript" type="text/javascript">

        function OnConfirmBookingPanelComplete(s, e) {
            // Hide loadingpanel after postback
            LoadingPanel.Hide();

            // Show panel
            callbackConfirmBookingPanel.SetVisible(true);

            // Hide other panels
            callbackApproveBookingPanel.SetVisible(false);
        }
        

    </script>

    <!-- Show confirmation Panel -->
    <dx:ASPxCallbackPanel ID="callbackConfirmBookingPanel" ClientInstanceName="callbackConfirmBookingPanel" runat="server" OnCallback="callbackConfirmBookingPanel_Callback" RenderMode="Table" ClientVisible="false">
        <ClientSideEvents EndCallback="OnConfirmBookingPanelComplete" CallbackError="CallBackError" />
        <PanelCollection>
            <dx:PanelContent>
                
                <b>Bekræftelse af booking</b>
                Tak for din godkendelse - hermed bekræftelse af din booking. Der er ligeledes sendt en mail til: emailadresse

                Betal regning online her

                Hent til outlook kalender

                Hent til mac kalender

                Vis booking oplysninger igen

                (Skjul desuden de øvrige paneler så booking ikke kan ændres - NOTE: Overvej at lav check ved booking om bil allerede er blevet booket uden ny booking er en erstatning. Blot i tilfælde af at brugeren åbner to vinduer...)

            </dx:PanelContent>
        </PanelCollection>
    </dx:ASPxCallbackPanel>

    <!-- Javascript: Error Panel  -->
    <script language="javascript" type="text/javascript">

        function OnErrorPanelComplete(s, e) {
            // Hide loadingpanel after postback
            LoadingPanel.Hide();

            // Show panel
            callbackErrorPanel.SetVisible(true);
        }
        

    </script>

    <!-- Error Panel - show errors (ex. Customer has no cars that need tire change) -->
    <dx:ASPxCallbackPanel ID="callbackErrorPanel" ClientInstanceName="callbackErrorPanel" runat="server" OnCallback="callbackErrorPanel_Callback" RenderMode="Table" ClientVisible="false">
        <ClientSideEvents EndCallback="OnErrorPanelComplete" CallbackError="CallBackError" />
        <PanelCollection>
            <dx:PanelContent>
                
                Eksempel 1:
                <b>Ingen biler funder</b>
                Der blev ikke fundet nogen biler der har status til at skal have skiftet hjul.

                Se biler og deres status her.

                Kontakt vores kunder service hvis der er sket en fejl.

            </dx:PanelContent>
        </PanelCollection>
    </dx:ASPxCallbackPanel>

    </div>

</asp:Content>
